<script setup>

import { onMounted, ref } from 'vue'
import DatabaseTableFieldUpdateFrom from '@/components/coms/devAndTest/devAndTestInfo/DatabaseTableFieldUpdateFrom.vue'
import DataBaseTableFieldAddForm from '@/components/coms/devAndTest/devAndTestInfo/DataBaseTableFieldAddForm.vue'
const updateOpen = ref(false);

import { useDataBaseInfoStore } from '@/stores/dataBaseInfo.js'

const databaseStore = useDataBaseInfoStore();

const showUpdateModal = (data) => {
  console.log("data",data)
  databaseStore.checkTableId=data.id;

  updateOpen.value = true;


  databaseStore.getTableFieldInfo();
};

onMounted(() => {

  databaseStore.getTableFieldInfo();

})



const showAddModal = () => {


  databaseStore.modalAddFieldState=true;

};

const columns = [
  {
    title: '字段名称',
    dataIndex: 'fieldName',
    key: 'fieldName',
  },
  {
    title: '字段类型',
    dataIndex: 'fileType',
    key: 'fileType',
  },
  {
    title: '外键表名',
    dataIndex: 'fieldSupplementTableName',
    key: 'fieldSupplementTableName',
    ellipsis: true,
  },
  {
    title: '外键表主键名',
    dataIndex: 'fieldSupplementFieldName',
    key: 'fieldSupplementFieldName',
    ellipsis: true,
  },

  {
    title: '字段数据类型',
    key: 'fileDataType',
    dataIndex: 'fileDataType',
  },
  {
    title: '字段数据库类型',
    key: 'fieldDatabaseType',
    dataIndex: 'fieldDatabaseType',
  },
  {
    title: '字段描述',
    key: 'description',
    dataIndex: 'description',
  },
  {
    title: 'Action',
    key: 'action',
  },
];


</script>

<template>
  <a-button type="primary" @click="showAddModal">添加字段</a-button>

  <a-modal v-model:open="updateOpen" title="编辑字段" @ok="handleOk">
   <DatabaseTableFieldUpdateFrom></DatabaseTableFieldUpdateFrom>
  </a-modal>

  <a-modal v-model:open="databaseStore.modalAddFieldState" :footer="null" style="width: 800px" title="添加字段">
   <DataBaseTableFieldAddForm></DataBaseTableFieldAddForm>
  </a-modal>



  <a-table :columns="columns" :data-source="databaseStore.showTableFieldInfo">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
            v-for="tag in record.tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a  @click="showUpdateModal(column)">编辑</a>

          |
<a-popconfirm
  title="您确认要删除当前字段信息?"
  ok-text="Yes"
  cancel-text="No"
  @confirm="databaseStore.deleteTableField(record)"
>
   <a-button type="primary" danger >删除</a-button>
  </a-popconfirm>
        </span>
      </template>
    </template>
  </a-table>
</template>

<style scoped>

</style>
